<template>
  <div class="huichuanshangpin">
    <top></top>
    <div v-loading='loading' style="padding: 20px;">

      <div class="kflexc" style="margin-bottom: 20px;">
        <div class="lia " @click="go('/gongju/haoma/banlichanpin')">办理产品</div>
        <div class="lia acts"  @click="go('/gongju/haoma/banlijilu')">办理记录</div>
      </div>

      <div class="kflex" style="margin-bottom: 20px;">
        <el-input v-model="search.product_name" style="width: 250px; margin-right: 20px;" placeholder="产品名称"></el-input>
        <el-input v-model="search.track_number" style="width: 250px; margin-right: 20px;" placeholder="生产号码"></el-input>
        <el-button round @click="dosearch()" type="danger">搜索</el-button>
      </div>

      <el-table :data="list" border style="width: 100%; margin: 20px 0;" ref="multipleTable" >
        <el-table-column align='center' prop='id' label="订单ID"></el-table-column>
        <el-table-column align='center' prop='product_name' label="产品名称"></el-table-column>
        <el-table-column align='center' prop='track_number' label="生产号码"></el-table-column>
        <el-table-column align='center' prop='channel_name' label="办理结果"></el-table-column>
        <el-table-column align='center' prop='channel_name' label="失败原因"></el-table-column>
        <el-table-column align='center' prop='channel_name' label="办理时间"></el-table-column>
      </el-table>

      <el-pagination style="text-align: right;" background layout="total,prev, pager, next" :current-page="search.page" @current-change="fanye" :page-size="search.page_size" :total="total"></el-pagination>
    </div>
  </div>
</template>

<script>
  import top from '../top.vue'
  import axios from 'axios'
  export default {
    components:{
      top
    },
    name: "huichuanshangpin",
    data() {
      return {
        search:{
          page:1,
          page_size:20,
          product_name:"",
          track_number:""
        },
        list:[],
        total:0,
        loading:true
      }
    },
    created() {
      this.getlist()

    },
    mounted() {

    },
    methods: {
      go:function(url){
        this.$router.push(url)
      },
      dosearch: function() {
        this.search.page = 1
        this.getlist()
      },

      //翻页
      fanye: function(page) {
        this.search.page = page
        this.getlist()
      },


      //获取列表
      getlist: function() {
        axios.get('/api/bjdx_record/search',{params:this.search})
          .then(response => {
            if (response.data.msg.code == 0) {
              this.list = response.data.data.data
              this.total = response.data.data.total
              this.loading = false
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
    }
  }
</script>

<style lang="scss" scoped>
  @import "@/assets/zuixin.scss";
</style>
